<template>
	<view class="container">
		<view class="nav">
			<view class="nav-list" v-for="(item,index) in list" :key="item.id" @tap="changeAct(item)">
				<view :class="[act==index?'name':'']">
					{{item.name}}
				</view>
				<view :class="[act==index?'line':'']">
				</view>
			</view>
		</view>
		<view class="content" :style="{'height':newsPanelHeight+'px'}" ref="content">
			<slot></slot>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				act: 0,
				content: 0,
				newsPanelHeight: 0,
				tabcontent: '',
				list: [{
						id: 0,
						name: '笔记'
					},
					{
						id: 1,
						name: '收藏'
					},
					{
						id: 2,
						name: `赞过`
					}
				],
			};
		},
		mounted() {
			let _this = this;
			uni.getSystemInfo({
				success(res) {
					uni.createSelectorQuery().select(".content").boundingClientRect(function(
						boundRect) {
						_this.newsPanelHeight = res.windowHeight - boundRect.bottom - 94;
					}).exec();
				}
			});
		},
		methods: {
			changeAct(item) {
				this.act = item.id;
				this.content = item.id
			},
		},
	}
</script>
<style lang="scss" scoped>
	.container {
		.nav {
			height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: rgba(255, 255, 255, 1);
			font-size: 30rpx;
			font-weight: bold;
			color: rgb(159, 159, 149);
			border-top-left-radius: 30rpx;
			border-top-right-radius: 30rpx;
			letter-spacing: 2.14rpx;
			border-bottom: 2px solid lightgrey;

			.nav-list {
				width: 100rpx;
				height: 100%;
				opacity: .9;
				margin: 40rpx 15rpx 0rpx 15rpx;
				display: flex;
				flex-direction: column;
				align-items: center;

				.name {
					color: black;
					font-weight: bolder;
				}

				.line {
					margin-top: 10rpx;
					width: 65rpx;
					height: 8rpx;
					border-radius: 15rpx;
					background-color: rgb(232, 63, 94);
				}
			}
		}

		/* 内容 */
		.content {
			background-color: rgb(250, 250, 250);
			overflow: auto;
		}
	}
</style>